<template>
    <div class="dialogBox-warpper" v-show="isShow">

        <!-- 消息提示 -->
        <div class="message" v-if="type === 'message'">
            <div v-if="messageIcon === 'success'" class="icon success appfont app-check"></div>
            <div v-if="messageIcon === 'warning'" class="icon warning appfont app-warning"></div>
            <div class="html" v-html="message"></div>
        </div>

        <!-- 弹窗提示 -->
        <div class="alert" v-if="type === 'alert'">
            <div class="title">
                <div class="icon appfont app-message"></div>
                <div class="name">{{ title }}</div>
            </div>
            <div class="html" v-html="message"></div>
            <div class="panel">
                <div class="btn success" @click="successEvent">{{ btnConfirm }}</div>
            </div>
        </div>

        <!-- 确认 -->
        <div class="confirm" v-if="type === 'confirm'">
            <div class="title">
                <div class="icon appfont app-confirm"></div>
                <div class="name">{{ title }}</div>
            </div>
            <div class="html" v-html="message"></div>
            <div class="panel">
                <div class="btn success" @click="successEvent">{{ btnConfirm }}</div>
                <div class="btn cancel" @click="cancelEvent">{{ btnCancel }}</div>
            </div>
        </div>

        <!-- 背景遮罩 -->
        <div class="mask" ref="mask" @click="maskClick"></div>
    </div>
</template>

<script>
export default {
    name : 'dialogBox',
    props: {
        /*提示信息*/
        title: {
            type   : String,
            default: '提示'
        },

        /*提示信息*/
        message: {
            type   : String,
            default: ''
        },

        /*提示图标*/
        messageIcon: {
            type   : String,
            default: ''
        },

        /*插件类型*/
        type: {
            type   : String,
            default: 'alert'
        },

        /*confirm插件接收的确认事件*/
        success: {
            type   : Function,
            default: () => console.log('Confirm click "success"')
        },

        /*confirm插件接收的取消事件*/
        cancel: {
            type   : Function,
            default: () => console.log('Confirm click "cancel"')
        },

        /*自动关闭时间*/
        closeTime: {
            type   : Number,
            default: 2000
        },

        /*是否锁定遮罩层*/
        muskLock: {
            type   : Boolean,
            default: false
        },

        /*遮罩层透明度 0-1*/
        muskOpacity: {
            type   : Number,
            default: 0.5
        },

        /*是否显示提示框*/
        isShow: {
            type   : Boolean,
            default: false
        },

        /*是否显示提示框*/
        btnConfirm: {
            type   : String,
            default: '确定'
        },

        /*是否显示提示框*/
        btnCancel: {
            type   : String,
            default: '取消'
        }
    },
    data () {
        return {
            closeTimeout: null
        };
    },
    watch  : {
        isShow (status) {
            status === true && this.clearTimer();
        }
    },
    methods: {
        /*关闭弹窗*/
        close () {
            this.isShow = false;
        },

        /*点击阴影区域关闭弹窗*/
        maskClick () {
            (!this.muskLock && (this.type === 'alert' || this.type === 'message')) && this.cancelEvent();
        },

        /*关闭窗口*/
        cancelEvent () {
            this.cancel();
            this.close();
        },

        /*confirm确认*/
        successEvent () {
            this.success();
            this.close();
        },

        /*清理定时器*/
        clearTimer () {
            this.closeTimeout && clearTimeout(this.closeTimeout);
            this.closeTimeout = null;
        }
    },

    updated () {
        this.$refs.mask.style.opacity = this.muskOpacity;
        if (this.type === 'message' && this.closeTime) {
            this.clearTimer();
            this.closeTimeout = setTimeout(() => {
                this.close();
            }, this.closeTime);
        }
    }
};
</script>

<style lang="less" scoped>
.dialogBox-warpper {
    position        : fixed;
    z-index         : 10000;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    display         : flex;
    justify-content : center;
    align-items     : center;
    border-radius   : @ui-border-width;
    overflow        : hidden;

    .mask {
        top        : 0;
        left       : 0;
        width      : 100%;
        height     : 100%;
        background : #000;
        z-index    : 1;
        position   : absolute;
    }

    .message {
        position              : relative;
        z-index               : 100;
        background            : #222;
        color                 : #fff;
        padding               : 15px 20px;
        -webkit-border-radius : 6px;
        -moz-border-radius    : 6px;
        border-radius         : 6px;
        max-width             : 50%;
        -webkit-box-shadow    : 0 0 10px rgba(0, 0, 0, 0.5);
        -moz-box-shadow       : 0 0 10px rgba(0, 0, 0, 0.5);
        box-shadow            : 0 0 10px rgba(0, 0, 0, 0.5);
        display               : flex;
        align-items           : center;
        justify-content       : center;

        .icon {
            margin-right : 6px;
            font-size    : 20px;
            flex-grow    : 0;
            flex-shrink  : 0;

            &.success {
                color : @green-dark;
            }

            &.warning {
                color : @orange;
            }
        }

        .html {
            flex-grow   : 1;
            flex-shrink : 1;
        }
    }

    .alert, .confirm {
        position              : relative;
        z-index               : 100;
        background            : #fff;
        color                 : #000;
        padding               : 20px;
        -webkit-border-radius : 10px;
        -moz-border-radius    : 10px;
        border-radius         : 10px;
        min-width             : 350px;
        max-width             : 600px;
    }

    .title {
        .noSelect;
        display     : flex;
        font-size   : 18px;
        color       : #000;
        align-items : center;
        font-weight : bold;

        .appfont {
            font-size    : 22px;
            margin-right : 5px;
        }
    }

    .alert .html, .confirm .html {
        padding : 25px 0 25px 0;
    }

    .panel {
        display         : flex;
        justify-content : flex-end;

        .btn {
            .noSelect;
            background            : #000;
            margin-left           : 6px;
            height                : 30px;
            line-height           : 30px;
            color                 : #fff;
            cursor                : pointer;
            -webkit-border-radius : 5px;
            -moz-border-radius    : 5px;
            border-radius         : 5px;
            padding               : 0 15px;

            &.success {
                background : #3b6de6;

                &:hover {
                    background : #114ee2;
                }
            }

            &.cancel {
                background : rgba(0, 0, 0, 0.3);

                &:hover {
                    background : rgba(0, 0, 0, 0.39);
                }
            }
        }
    }
}
</style>
